<template>
<div class="detail-main">
    <el-card class="detail">
        <div slot="header" class="header">添加素材</div>
        <div class="content">
            <el-form ref="form" :model="material" label-width="80px" :rules="rules" v-loading="loading" element-loading-text="提交中……">
                <el-form-item label="素材文件" prop="coverImg ">

                    <el-upload class="avatar-uploader" ref="upload" :headers="headers" action="/lejuAdmin/material/uploadFileOssSave" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="material.coverImg " :src="material.coverImg" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div class="el-upload__tip" v-if="!material.coverImg">只能上传jpg/png/gif文件，且不超过1.5M</div>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" @click="submitMaterial">提交</el-button>
                </el-form-item>
            </el-form>
        </div>

    </el-card>

</div>
</template>

<script>
import {
    getToken
} from '@/utils/myAuth'

import {
    uploadFileOssSave
} from '@/api/content/material'
export default {
    components: {

    },
    data() {
        return {
            material: {
                coverImg: ''
            },
            rules: {
                coverImg: [{
                    required: true,
                    message: '请选择上传文件',
                    trigger: 'change'
                }, ]
            },

            loading: false

        };
    },
    computed: {
        headers() {
            return {
                token: getToken()
            }
        }

    },
    created() {
     

    },
    mounted() {

    },
    methods: {
        handleAvatarSuccess(res, file) {
            console.log(res);
            if (res.success) {
                this.material.coverImg = res.data.material.ossUrl

            }

        },
        submitUpload() {
            this.$refs.upload.submit();
        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 1.5;

            // 正则判断图片的类型格式  ig表示忽略大小
            var reg = /image\/(jpeg|png|gif)/ig

            const isFileTypeOk = reg.test(file.type)

            if (!isFileTypeOk) {
                this.$message.error('上传头像图片只能是 JPG、PNG、GIF 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isFileTypeOk && isLt2M;
        },
        // 提价表单内容
        submitMaterial() {
            if (!this.material.coverImg) {
                this.$message.error('请上传文件')
            } else {
                this.loading = true
                this.$message.success('添加成功')
                setTimeout(() => {
                    this.$router.push({
                        name: 'contentMaterial'
                    })
                }, 2000);
            }
        }

    },
};
</script>

<style lang="scss" scoped>
.detail {
    margin: 30px;
}

.avatar-uploader {
    width: 178px;
    height: 178px;
    border: 1px solid #d9d9d9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
        border-radius: 10px;
    }

}

.header {
    font-weight: bolder;
    color: rgb(209, 50, 50);
    font-size: 22px;
}
</style>
